<template>
  <div style="min-width: 1200px">
    <div v-if="$route.path == '/storesAnalysis'">
      <div class="vs-search-box">
        <div class="vs-search-title">门店数据分析</div>
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
            value-format="yyyy-MM"
              format="yyyy-MM"
              v-model="month"
              type="month"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <el-button icon="el-icon-download" @click="derive" :loading="isDerive">导出</el-button>
          </el-form-item>
        </el-form>
        <el-checkbox-group
          v-model="checkboxGroup"
          size="medium"
          class="select-top"
        >
          <!-- <el-checkbox-button v-for="item in getJects" :label="item.name" :key="item.name">{{item.name}}</el-checkbox-button> -->
        </el-checkbox-group>
        <div
          ref="ratioi"
          style="width: 100%; height: 400px"
          class="total-number-tu"
        ></div>
      </div>

      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="pagin.store_id" placeholder="请选择">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              @change="setDate($event, 2)"
              v-model="month_two"
              value-format="yyyy-MM-dd"
              style="width: 250px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="handleCurrentChange(2)" type="primary"
              >查询</el-button
            >
            <el-button icon="el-icon-download" @click="derive2" :loading="isDerive2">导出</el-button>
          </el-form-item>
        </el-form>
        <el-checkbox-group
          v-model="checkboxGroup"
          size="medium"
          class="select-top"
        >
          <!-- <el-checkbox-button v-for="item in getJects" :label="item.name" :key="item.name">{{item.name}}</el-checkbox-button> -->
        </el-checkbox-group>
        <div
          ref="vip"
          style="width: 100%; height: 400px"
          class="total-number-tu"
        ></div>
      </div>

      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="pagi.store_id" placeholder="请选择">
              <!-- <el-option label="全部" :value="0"> </el-option> -->
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              v-model="month_Three"
              @change="setDate($event, 3)"
              value-format="yyyy-MM-dd"
              style="width: 250px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="handleCurrentChange(3)" type="primary"
              >查询</el-button
            >
            <el-button icon="el-icon-download" @click="derive3" :loading="isDerive3">导出</el-button>
          </el-form-item>
        </el-form>
        <el-checkbox-group
          v-model="checkboxGroup"
          size="medium"
          class="select-top"
        >
          <!-- <el-checkbox-button v-for="item in getJects" :label="item.name" :key="item.name">{{item.name}}</el-checkbox-button> -->
        </el-checkbox-group>
        <div
          ref="employees"
          style="width: 100%; height: 400px"
          class="total-number-tu"
        ></div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: "",
      month_two: "",
      month_Three: "",
      checkboxGroup: [],
      form: {
        username: "",
        date: "",
      },
      paging: {
        username: "", //姓名
        store_id: 1,
        days:'',
        page: 1,
        total: 0,
        limit: 10,
      },
      pagin: {
        username: "", //姓名
        store_id: 0,
        start_time: "", //开始时间
        end_time: "", //结束时间
        page: 1,
        total: 0,
        limit: 10,
      },
      pagi: {
        username: "", //姓名
        store_id: 0,
        start_time: "", //开始时间
        end_time: "", //结束时间
        page: 1,
        total: 0,
        limit: 10,
      },
      getratio: {
        store_id: 0,
        start_time: "",
        end_time: "",
      },
      employee: {
        start_time: "",
        store_id: 0,
        end_time: "",
      },
      shopList: [], //获取门店信息
      performance: [], //门店业绩比率
      test: [], //门店业绩时间
      achievemen: [], //业绩完成率
      turnove: [], //营业额增长率
      technician: [], //技师点钟率

      results: [], //会员比率
      increas: [], //会员增长率
      conversio: [], //会员转化率
      drai: [], //会员流失率

      employees: [], //员工比率
      inductio: [], //入职员工比率
      qui: [], //离职员工比率
      isDerive:false,
      isDerive2:false,
      isDerive3:false,
      // endDatePicker: this.handelFixDate(),//禁用当前月份以后的月份
   	  // fixValue:null
    };
  },

  created() {
    var date = new Date();

    let date1 = this.getCurrentMonthFirst();
    let date2 = this.getCurrentMonthLast();
    // 页面赋值
    this.month = date.getFullYear()+'-'+(date.getMonth()+1);
    this.getStoreRatio();
    this.getUserRatio();
    this.getStaffRatio();
    this.getratio.start_time = date1;
    this.getratio.end_time = date2;
    this.employee.start_time = date1;
    this.employee.end_time = date2;
    // this.paging.store_id = 0
    // this.getratio.store_id = 0
    // this.employee.store_id = 0
    this.homegetStore();
    this.month_two = [date1, date2];
    this.month_Three = [date1, date2];
  },
  async mounted() {},

  methods: {
    // //禁用当月后的时间
    // handelFixDate() {
    //   return {
    //     disabledDate(time) {
    //       let t = new Date().getDate();
    //       // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
    //       // 如果想之前的不能选择把 > 换成 <
    //       return time.getTime() > Date.now() - 8.64e7 * t;
    //     },
    //   };
    // },

    //门店业绩比率导出
      async derive(){
            this.isDerive = true;
            let res = await this.$Http.exportStoreRatio(this.paging);
            this.utils.downloadXlsx(res,'门店业绩比率')
            this.isDerive = false;
        },
    //会员比率导出
      async derive2(){
            this.isDerive2 = true;
            let res = await this.$Http.exportUserRatio(this.getratio);
            this.utils.downloadXlsx(res,'会员比率')
            this.isDerive2 = false;
        },
     //员工比率导出
      async derive3(){
            this.isDerive3 = true;
            let res = await this.$Http.exportStaffRatio(this.employee);
            this.utils.downloadXlsx(res,'员工比率')
            this.isDerive3 = false;
        },

    async homegetStore() {
      //获取门店
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        let obj = {
          id: 0,
          title: "全部",
        };
        this.shopList = [obj, ...data];
      }
    },
    getCurrentMonthFirst() {
      //获取当月第一天的值
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },

    getCurrentMonthLast() {
      //获取当月最后一天的值
      var date = new Date();
      var currentMonth = date.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      var lastTime = new Date(nextMonthFirstDay - oneDay);
      var month = parseInt(lastTime.getMonth() + 1);
      var day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },
    setDate(e, type) {
      if (type == 2) {
        this.getratio.start_time = e[0];
        this.getratio.end_time = e[1];
      } else {
        this.employee.start_time = e[0];
        this.employee.end_time = e[1];
      }
    },
    // setDate(e){//获取时间
    //     console.log('setData',e);
    //     if(e&&e.length){
    //         this.paging.start_time = e[0];
    //         this.paging.end_time = e[1]
    //     }else{
    //         this.paging.start_time = '';
    //         this.paging.end_time = ''
    //     }
    // },

    // setDate2(e){//获取时间
    //     console.log('setData',e);
    //     if(e&&e.length){
    //         this.pagin.start_time = e[0];
    //         this.pagin.end_time = e[1]
    //     }else{
    //         this.pagin.start_time = '';
    //         this.pagin.end_time = ''
    //     }
    // },

    // setDate3(e){//获取时间
    //     // console.log('setData',e);
    //     // if(e&&e.length){
    //     //     this.pagi.start_time = e[0];
    //     //     this.pagi.end_time = e[1]
    //     // }else{
    //     //     this.pagi.start_time = '';
    //     //     this.pagi.end_time = ''
    //     // }
    // },
    async getStoreRatio() {
      //门店业绩比率
      this.paging.days = this.month;
      let { code, data } = await this.$Http.getStoreRatio(this.paging);
      if (code) {
        this.performance = data;
        console.log(111111111111, this.performance);
      }
      let daye = [];
      let achievement = [];
      let turnover = [];
      let technician = [];
      this.performance.forEach((item) => {
        let womendata = [];
        womendata.push(item.day);
        womendata.push(item.achievement);
        achievement.push(womendata);
        daye.push(item.day);

        let mendata = [];
        mendata.push(item.day);
        mendata.push(item.turnover);
        turnover.push(mendata);

        let techdata = [];
        techdata.push(item.day);
        techdata.push(item.technician);
        technician.push(techdata);
      });
      this.test = daye;
      this.achievemen = achievement;
      this.turnove = turnover;
      this.technicia = technician;
      console.log(9999999999, this.achievemen);
      this.init1();
    },

    async getUserRatio() {
      //会员比率
      this.getratio.store_id = this.pagin.store_id;
      // this.getratio.start_time = this.pagin.start_time;
      // this.getratio.end_time = this.pagin.end_time;
      let { code, data } = await this.$Http.getUserRatio(this.getratio);
      if (code) {
        this.results = data;
        console.log(2222222222, this.results);
      }
      let daye = [];
      let increase = [];
      let conversion = [];
      let drain = [];
      this.results.forEach((item) => {
        let womendata = [];
        womendata.push(item.day);
        womendata.push(item.increase);
        increase.push(womendata);
        daye.push(item.day);

        let mendata = [];
        mendata.push(item.day);
        mendata.push(item.conversion);
        conversion.push(mendata);

        let techdata = [];
        techdata.push(item.day);
        techdata.push(item.drain);
        drain.push(techdata);
      });
      this.test = daye;
      this.increas = increase;
      this.conversio = conversion;
      this.drai = drain;
      console.log(9999999999, this.achievemen);
      this.init2();
    },

    async getStaffRatio() {
      //员工比率
      this.employee.store_id = this.pagi.store_id;
      // this.employee.start_time = this.pagi.start_time;
      // this.employee.end_time = this.pagi.end_time;
      let { code, data } = await this.$Http.getStaffRatio(this.employee);
      if (code) {
        this.employees = data;
        console.log(333333333, this.employees);
      }
      let daye = [];
      let induction = [];
      let quit = [];
      this.employees.forEach((item) => {
        let womendata = [];
        womendata.push(item.day);
        womendata.push(item.induction);
        induction.push(womendata);
        daye.push(item.day);

        let mendata = [];
        mendata.push(item.day);
        mendata.push(item.quit);
        quit.push(mendata);
      });
      this.test = daye;
      this.inductio = induction;
      this.qui = quit;
      console.log(777777777, this.inductio);
      console.log(9999888888, this.qui);
      this.init3();
    },

    async init1() {
      //第一幅图
      //门店业绩比率
      let ratioi = this.$echarts.init(this.$refs.ratioi);
      ratioi.setOption({
        tooltip: {
          trigger: "axis",
          formatter:function(params) {
            var str = params[0].name + '<br>'
            for(let item of params) {
            console.log('params',item.value);
              str += item.seriesName + ' : ' + item.value[1] + '%<br>'
            }
            return str;
          }
        },
        grid: {
          left: "3%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          right: 0,
          orient: "vertical",
          y: "center",
          data: ["业绩完成率", "营业额增长率", "技师点钟率"],
        },
        xAxis: {
          type: "category",
          data:this.performance.day,
          axisLabel: {
            interale: 0,
            rotate: 0, //设置日期显示样式（倾斜度）
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value} %",
          },
        },
        series: [
          {
            name: "业绩完成率",
            type: "line",
            data: this.achievemen,
          },
          {
            name: "营业额增长率",
            type: "line",
            data: this.turnove,
          },
          {
            name: "技师点钟率",
            type: "line",
            data: this.technicia,
          },
        ],
      });

      window.onresize = function () {
        // customer.resize();
        // consume.resize();
        // consumeGender.resize();
        // ratio.resize();
      };
    },

    async init2() {
      //第二幅图
      //会员比率
      let vip = this.$echarts.init(this.$refs.vip);
      vip.setOption({
        tooltip: {
          trigger: "axis",
          formatter:function(params) {
            var str = params[0].name + '<br>'
            for(let item of params) {
            console.log('params',item.value);
              str += item.seriesName + ' : ' + item.value[1] + '%<br>'
            }
            return str;
          }
        },
        grid: {
          left: "3%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          right: 0,
          orient: "vertical",
          y: "center",
          data: ["会员增长率", "会员转化率", "会员流失率"],
        },
        xAxis: {
          type: "category",
          min: this.results.start_time,
          max: this.results.end_time,
          axisLabel: {
            interale: 0,
            rotate: 0, //设置日期显示样式（倾斜度）
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value} %",
          },
        },
        series: [
          {
            name: "会员增长率",
            type: "line",
            data: this.increas,
          },
          {
            name: "会员转化率",
            type: "line",
            data: this.conversio,
          },
          {
            name: "会员流失率",
            type: "line",
            data: this.drai,
          },
        ],
      });

      window.onresize = function () {
        // customer.resize();
        // consume.resize();
        // consumeGender.resize();
        // vip.resize();
      };
    },

    async init3() {
      //第三幅图
      //员工比率
      let employees = this.$echarts.init(this.$refs.employees);
      employees.setOption({
        tooltip: {
          trigger: "axis",
          formatter:function(params) {
            var str = params[0].name + '<br>'
            for(let item of params) {
            console.log('params',item.value);
              str += item.seriesName + ' : ' + item.value[1] + '%<br>'
            }
            return str;
          }
        },
        grid: {
          left: "3%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          right: 0,
          orient: "vertical",
          y: "center",
          data: ["员工入职率", "离职员工比率"],
        },
        xAxis: {
          type: "category",
          min: this.employees.start_time,
          max: this.employees.end_time,
          axisLabel: {
            interale: 0,
            rotate: 0, //设置日期显示样式（倾斜度）
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value} %",
          },
        },
        series: [
          {
            name: "员工入职率",
            type: "line",
            data: this.inductio,
          },
          {
            name: "离职员工比率",
            type: "line",
            data: this.qui,
          },
        ],
      });
    },

    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.form.date = "";
      this.handleCurrentChange(1);
    },

    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },

    handleCurrentChange(val) {
      if (val == 1) {
        this.getStoreRatio();
      }
      if (val == 2) {
        this.getUserRatio();
      }
      if (val == 3) {
        this.getStaffRatio();
      }
    },
  },
};
</script>